import React, { Component } from 'react';
import { Modal, Typography, Divider } from 'antd';
import styles from './catlistModel.less';
const { Text } = Typography;

const CatlistModel: any = (props: any) => {
  let { visible, catlistData, setCat, catData, closeModel } = props;
  let categories: any[] = [];

  if (catlistData.categories) {
    Object.keys(catlistData.categories).forEach(key => {
      categories.push({
        title: catlistData.categories[key],
        id: key.toString(),
        list: [],
      });
    });
    if (categories.length > 0) {
      catlistData.sub.forEach((item: any) => {
        categories.forEach((catItem: any) => {
          if (item.category == catItem.id) {
            catItem.list.push(item);
          }
        });
      });
    }
  }

  const handleOk = (item: any) => {
    setCat(item);
  };
  const handleCancel = () => {
    closeModel();
  };

  return (
    <div>
      <Modal
        title="全部类型"
        visible={visible}
        footer={null}
        width={'50%'}
        onCancel={handleCancel}
      >
        <div className={styles.catlistModelBody}>
          {categories.map((data: any, index: number) => (
            <div className={styles.catItem} key={index}>
              <Divider orientation="left" className={styles.leftDivider}>
                {data.title}
              </Divider>
              {data.list.map((item: any, indexItem: number) => (
                <span key={indexItem} className={styles.item}>
                  <Text
                    className={
                      item.name == catData
                        ? styles.activeText
                        : styles.selectText
                    }
                    onClick={() => {
                      handleOk(item);
                    }}
                  >
                    {item.name}
                  </Text>
                  <Divider type="vertical"></Divider>
                </span>
              ))}
            </div>
          ))}
        </div>
      </Modal>
    </div>
  );
};

export default CatlistModel;
